<template>
  <div class='menu bottom-menu-container' v-if="endlessKanvasScene">
    <div class='bottom-menu'>
      <zoomButtons />
      <fullscreen-button />
      <fit-to-screen-button />
    </div>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
import { usePhaserStore } from '../stores/phaserStore';
import { mapState } from 'pinia';

export default defineComponent({
  name: 'bottomMenu',
  components: {
    fullscreenButton: defineAsyncComponent(() =>
      import('./buttons/fullscreenButton.vue')
    ),
    fitToScreenButton: defineAsyncComponent(() =>
      import('./buttons/fitToScreenButton.vue')
    ),
    zoomButtons: defineAsyncComponent(() =>
      import('./buttons/zoomButtons.vue')
    ),

  },
  computed: {
    ...mapState(usePhaserStore, ['endlessKanvasScene']),

    // buttons(): any[] {
    //   return toolbarButtons(this.endlessKanvasScene);
    // },
  },
});
</script>
<style scoped>
.bottom-menu-container {

  width: calc(100vw - 10px);
  height: 48px;
  background-color: transparent;
  align-items: center;
  margin-bottom: 5px;
  margin-left: 5px;
  /* border: dotted blueviolet; */
  bottom: 0;
  left: 0;
}

.bottom-menu {
  margin-left: auto;
  margin-right: 48px;
  display: flex;
  gap: 5px
}



.menu {
  position: fixed;
  pointer-events: none;
  background-color: transparent;
  display: flex;
  z-index: 100;
}
</style>
